import "./FormView.less"; // 需前置 否则组件中设置的部分样式会低于wea-edc-form-item的相关样式
import React from "react";
import FormMainView from "./Main";
import { observer } from "mobx-react";
import FooterView from "../component/footer/View";
import CountDownView from '../../../common/count-down';
import isMobile from "../../../../utils/mobileDetect";
import { viewTypes } from "../../../../constants/form";
import utils from '../../../../utils';

const { READONLY } = viewTypes;
const isMobileView = isMobile();

@observer
export default class FormView extends React.Component {
  constructor(props) {
    super();

    this.store = props.store;
  }

  componentDidUpdate() {
    const { errorCom, resetErrorCom } = this.store;

    if (errorCom) {
      const {
        errorCom: subErrorCom
      } = errorCom;
      const wrapperDOM = document.querySelector('.wea-edc-fv-wrapper');

      if(!wrapperDOM) return;

      const errorComDOM = wrapperDOM.querySelector(`[data-id='${errorCom.uuid}']`);
      const subErrorComDOM = subErrorCom && wrapperDOM.querySelector(`[data-id='${subErrorCom.uuid}']`);

      this.scrollToError(errorComDOM);
      this.autoFocus(subErrorComDOM || errorComDOM);
      resetErrorCom();
    }
  }

  scrollToError(errorComDOM) {
    if (errorComDOM) {
      utils.scrollSmoothTo(errorComDOM.offsetTop);

      const errorCom = this.props.store.errorCom;
      
      if(errorCom.type == "DATATABLE"){

        const childErroComDOM = errorComDOM.querySelector('.wea-edc-has-error');

        if (childErroComDOM) {
            const scroller = errorComDOM.querySelector('.ant-table-body');

            scroller.scrollLeft = childErroComDOM.offsetLeft;
        }
          
      }
    }
  }

  autoFocus(errorComDOM) {
    if (!errorComDOM) {
      return;
    }
    const childErroComDOM = errorComDOM.querySelector('.wea-edc-has-error');

    if (childErroComDOM) {
      errorComDOM = childErroComDOM;
    }

    const focusEle = errorComDOM.querySelector('select, input, textarea');

    if (!focusEle) return;

    if (focusEle.tagName === 'INPUT' && focusEle.type !== 'text') {
      return;
    }

    focusEle.focus();
  }

  getLimitTimeContent = () => {
    const { timeLimit, onSubmit, isShowRepairTitle } = this.store;

    if (timeLimit) {
      const { timeType, customTime } = timeLimit;
      const countTime = Number(timeType === 'custom' ? customTime : timeType);

      return (
        <CountDownView ecId={`${this && this.props && this.props.ecId || ''}_CountDownView@ailgyg`} time={countTime} isShowRepairTitle={isShowRepairTitle} onSubmit={onSubmit} />
      );
    }
    return null;
  }

  render() {
    const {
      formHeader, formFooter, footer, components, shortkey, viewType, timeLimit, isShowRepairTitle,
      onSubmit, onValueChange, rightLevel, toggleFooterDisable, theme, readOnlyBaseData, noEdit, 
      editBaseInfo, isEdit
    } = this.store;
    const { showHeader = true } = this.props;
    const timeTop = timeLimit ? 40 : 0;
    const repairTop = isShowRepairTitle && viewType !== READONLY ? 40 : 0;
    const finalTop = timeTop + repairTop;

    return (
      <div style={{ 'marginTop': isMobileView ? finalTop : 0 }}>
        {this.getLimitTimeContent()}
        <FormMainView ecId={`${this && this.props && this.props.ecId || ''}_FormMainView@fcn7xf`}
          formFooter={formFooter}
          formHeader={formHeader}
          components={components}
          viewType={viewType}
          onSubmit={onSubmit}
          onValueChange={onValueChange}
          shortkey={shortkey}
          toggleFooterDisable={toggleFooterDisable}
          showHeader={showHeader}
          theme={theme}
          baseData={readOnlyBaseData}
          editBaseInfo={editBaseInfo}
          noEdit={noEdit}
          isEdit={isEdit}
        />
        {
          footer &&
          <FooterView ecId={`${this && this.props && this.props.ecId || ''}_FooterView@ekxmnz`} data={footer.config} shortkey={rightLevel === 2 ? shortkey : ""} />
        }
      </div>
    );
  }
}